<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
    <link href="{{ url_for('static', filename='js/wangeditor/style.css') }}" rel="stylesheet" />
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            margin: 10px 0;
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>写文章</h2>
    <form method="post" class="box">
        <p>
            <span>标题：</span>
            <input style="height: 28px" name="title" /> 分类：
            <select name="category_id">
                {% for cat in categories %}
                <option value="{{ cat.id }}">{{ cat.name }}</option>
                {% endfor %}
            </select><br> 标签（用空格分隔）：
            <input name="tags"><br>
            <input type="hidden" name="content" id="content">
        </p>
        <p>内容：</p>

        <div id="editor—wrapper">
            <div id="toolbar-container">
                <!-- 工具栏 -->
            </div>
            <div id="editor-container">
                <!-- 编辑器 -->
            </div>
        </div>
        <p>
            <button type="submit" name="status" value="draft">保存为草稿</button>
            <button type="submit" name="status" value="published">发布</button>
        </p>
    </form>
    <p><a href="/admin" class="back">← 返回</a></p>
    <script src="{{ url_for('static', filename='js/wangeditor/index.js') }}"></script>
    <script>
        const {
            createEditor,
            createToolbar
        } = window.wangEditor;

        const editor = createEditor({
            selector: "#editor-container",
            html: "<p><br></p>",
            config: {
                placeholder: "Type here...",
                onChange(editor) {
                    const html = editor.getHtml();
                    console.log("editor content", html);

                    document.querySelector('#content').value = html;
                },
            },
            // mode: "default",
        });

        const toolbar = createToolbar({
            editor,
            selector: "#toolbar-container",
            config: {},
            mode: "default",
        });
    </script>
</body>

</html>